<template>
  <div v-if="Object.keys(tableData).length!==0">
    <h2>{{title}}</h2>
    <h3 class="size">
      {{$t('message.cglx')}}：
      <span>{{tableData.contractTypeName}}</span>
    </h3>
    <p class="divider"></p>
    <div class="mian-title">{{$t('message.qyf')}}</div>
    <div class="inner-style">
      <el-form label-width="200px" class="el-datashow-list">
        <el-form-item :label="$t('message.jia-cg')+':'">
          <p>{{jia}}</p>
        </el-form-item>
        <el-form-item :label="$t('message.yi-gy')+':'">
          <p>{{yi}}</p>
        </el-form-item>
        <el-form-item
          v-for="(item,index) in clientList"
          :key="index"
          :label="item.type==1?$t('message.cgs')+':':$t('message.gys')+':'"
        >
          <p>{{item.value}}</p>
        </el-form-item>
      </el-form>
    </div>
    <p class="divider"></p>
    <div class="mian-title">{{$t('message.xymc')}}</div>
    <div class="inner-style">
      <el-form label-width="200px" class="el-datashow-list">
        <el-form-item :label="$t('message.chinese')+':'">
          <p>{{tableData.contractTitleCn}}</p>
        </el-form-item>
        <el-form-item v-if="tableData.contractTitleEn !==''" :label="$t('message.english')+':'">
          <p>{{tableData.contractTitleEn}}</p>
        </el-form-item>
      </el-form>
    </div>
    <p class="divider"></p>
    <div class="mian-title">{{$t('message.xyjbqk')}}</div>
    <div class="inner-style">
      <el-form label-width="200px" class="el-datashow-list">
        <el-form-item :label="$t('message.xyh')+':'">
          <p>{{tableData.contractId}}</p>
        </el-form-item>
        <el-form-item :label="$t('message.xynr')+':'">
          <p>{{tableData.content}}</p>
        </el-form-item>
        <el-form-item v-if="tableData.ossUrlList.length!==0" :label="$t('message.scfj')+':'">
          <down-load :pfileList="cfileList"></down-load>
        </el-form-item>
        <el-form-item :label="$t('message.htqx')+':'">
          <p
            v-if="tableData.executionStartDate!==0&&tableData.executionStartDate!==''&&tableData.executionStartDate!==null"
          >{{tableData.executionStartDate | dateFormats}}{{$t('message.to')}}{{tableData.executionEndDate | dateFormats}}</p>
        </el-form-item>
      </el-form>
    </div>
    <p class="divider"></p>
    <div class="mian-title">{{$t('message.xyje')}}</div>
    <div class="inner-style">
      <el-form label-width="200px" class="el-datashow-list">
        <el-form-item :label="$t('message.bz')+':'">
          <p>{{tableData.currencyName}}</p>
        </el-form-item>
        <el-form-item :label="$t('message.je')+':'">
          <p>{{tableData.amount}}</p>
        </el-form-item>
        <el-form-item :label="$t('message.zscmy')+':'">
          <p>{{tableData.usd==null?0:tableData.usd}}{{$t('message.wmy')}}</p>
        </el-form-item>
        <el-form-item :label="$t('message.ynncjdndje')+':'">
          <p
            style="position: relative;top: 24px;"
          >{{tableData.amountPerYear==null?0:tableData.amountPerYear}}{{$t('message.wmy')}}</p>
        </el-form-item>
      </el-form>
    </div>
    <p class="divider"></p>
    <div class="mian-title">{{$t('message.fwcklb')}}</div>
    <div class="inner-style">
      <el-form label-width="200px" class="el-datashow-list">
        <el-form-item :label="$t('message.htfw')+':'">
          <p>
            {{border}}
            <span
              class="spanStyle"
              v-if="tableData.border=='overseas'"
            >{{$t('message.jck')}}:{{impExpType}}</span>
            <span v-if="tableData.province!==null&&tableData.province!==''">
              {{tableData.provinceName}}
              <span>{{tableData.cityName}}</span>
            </span>
          </p>
        </el-form-item>
        <el-form-item :label="$t('message.gbdq')+':'" v-if="tableData.border=='overseas'">
          <p>{{tableData.region}}</p>
        </el-form-item>
        <el-form-item v-if="tableData.border=='overseas'" :label="$t('message.zfqysd')+':'">
          <p>
            <span>{{tableData.attributionProvinceName}}&nbsp;&nbsp;</span>

            <span>{{tableData.attributionCityName}}</span>
          </p>
        </el-form-item>
      </el-form>
    </div>
    <p class="divider"></p>
    <div class="mian-title">{{$t('message.hyly')}}</div>
    <div class="inner-style">
      <el-form label-width="200px" class="el-datashow-list">
        <el-form-item :label="$t('message.hyly')+':'">
          <p>
            {{serviceType1}} {{serviceType2}} {{serviceType3}}
            <span
              v-if="tableData.otherService!==''&&tableData.otherService!==null"
            >:{{tableData.otherService}}</span>
          </p>
        </el-form-item>
      </el-form>
    </div>
    <p class="divider"></p>
    <div class="mian-title">{{$t('message.txrxx')}}</div>
    <div class="inner-style">
      <el-form label-width="200px" class="el-datashow-list">
        <el-form-item :label="$t('message.tbr')+':'">
          <p>{{tableData.filledBy}}</p>
        </el-form-item>
        <el-form-item :label="$t('message.lxdh')+':'">
          <p>{{tableData.phone}}</p>
        </el-form-item>
        <el-form-item :label="$t('message.zjhm')+':'">
          <p>{{tableData.landlineNumber}}</p>
        </el-form-item>
      </el-form>
    </div>
    <el-form label-width="200px" ref="ruleForm">
      <el-tabs class="tabs" v-model="tabName" v-if="trackList.length">
        <el-tab-pane
          v-for="item in trackList"
          :key="item.id"
          :label="item.trackCount"
          :name="item.id + ''"
        >
          <div>
            <p class="divider"></p>
            <div class="mian-title">{{$t('message.zxqk')}}</div>
            <div class="inner-style">
              <el-form-item :label="$t('message.zxqk')+':'">
                <span style="padding-right: 10px;">{{item.executionStatus}}</span>
                <span>{{item.executionRemark}}</span>
              </el-form-item>
              <el-form-item :label="$t('message.zxje')+':'">{{item.amount}}</el-form-item>
              <el-form-item :label="$t('message.cgbs')+':'">{{item.implementationInformation}}</el-form-item>
              <el-form-item v-if="item.ossUrlList.length!==0" :label="$t('message.scfj')+':'">
                <down-load :pfileList="item.ossUrlList"></down-load>
              </el-form-item>
            </div>
            <p class="divider"></p>
            <div class="mian-title">{{$t('message.txrxx')}}</div>
            <div class="inner-style">
              <el-form-item :label="$t('message.tbr')+':'">{{item.filledBy}}</el-form-item>
              <el-form-item :label="$t('message.lxdh')+':'">{{item.phone}}</el-form-item>
              <el-form-item :label="$t('message.zjhm')+':'">{{item.seatNumber}}</el-form-item>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
import downLoad from "@components/uploadFile/downLoad.vue";
export default {
  data() {
    return {
      tableData: {},
      serviceList: [],
      secondList: [],
      thirdList: [],
      contractTypeList: [],
      cfileList: [],
      cfileList2: [],
      tabName: "",
      trackList: [], // 追踪列表
      clientList: [],
      jia: "",
      yi: ""
    };
  },
  watch: {
    serviceListMonitor(val) {
      this.serviceList = val;
    }
  },
  components: {
    downLoad
  },
  props: ["title"],
  computed: {
    serviceListMonitor() {
      return this.$store.state.serviceList;
    },
    border() {
      //境内外
      if (this.tableData.border == "within") {
        return this.$t("message.jn");
      } else if (this.tableData.border == "overseas") {
        return this.$t("message.jw");
      } else {
        return "";
      }
    },
    impExpType() {
      //进出口
      if (this.tableData.impExpType == "import") {
        return this.$t("message.jk");
      } else if (this.tableData.impExpType == "export") {
        return this.$t("message.ck");
      } else {
        return "";
      }
    },
    serviceType1() {
      let str = "";
      this.serviceList.forEach(item => {
        if (item.dictCode == this.tableData.serviceType1) {
          str = item.dictName;
          if (item.serviceList.length !== 0) {
            this.secondList = item.serviceList;
          }
        }
      });
      return str;
    },
    serviceType2() {
      let str = "";
      this.secondList.forEach(item => {
        if (item.dictCode == this.tableData.serviceType2) {
          str = item.dictName;
          if (item.serviceList.length !== 0) {
            this.thirdList = item.serviceList;
          }
        }
      });
      if (str == "") {
        return str;
      } else {
        return "-" + str;
      }
    },
    serviceType3() {
      let str = "";
      this.thirdList.forEach(item => {
        if (item.dictCode == this.tableData.serviceType3) {
          str = item.dictName;
        }
      });
      if (str == "") {
        return str;
      } else {
        return "-" + str;
      }
    }
  },
  mounted() {
    this.getMessage();
    this.serviceList = this.$store.state.serviceList;
    this.contractTypeList = this.$store.state.contractTypeList;

    // 如果在追踪状态，需要获取追踪数据
    if (+this.$route.query.stat === 1) {
      this.$axios
        .get("/api/contractTrack/getInfos", {
          params: {
            id: this.$route.query.id
          }
        })
        .then(res => {
          if (res.code === 200) {
            this.trackList = res.data;
            this.tabName = res.data[0].id + "";
            document.getElementsByClassName("el-tabs__nav")[0].style[
              "max-width"
            ] = "1400px";
            document.getElementsByClassName("el-tabs__nav")[0].style[
              "overflow-x"
            ] = "scroll";
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  methods: {
    getMessage() {
      this.$axios
        .get("/api/contract/getContract", {
          params: {
            id: this.$route.query.id
          }
        })
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.data;
            if (this.tableData.client !== null)
              this.clientList = JSON.parse(this.tableData.client);
            this.jia = this.clientList[0].value;
            this.yi = this.clientList[1].value;
            this.clientList.shift();
            this.clientList.shift();
            if (this.tableData.ossUrlList !== "")
              this.cfileList = this.tableData.ossUrlList;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.contract-details {
  width: 88%;
  padding: 15px;
  margin: 0 auto;
}
.inner-style {
  width: 82%;
  margin: 0 auto;
}
.divider {
  width: 100%;
  border-top: 1px dashed #d9e1e9;
  margin-top: 12px;
}
.mian-title {
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 16px;
  font-size: 16px;
  border-left: 4px solid #fe8c01;
  padding-left: 10px;
  margin: 12px 0 24px 0;
}
h2 {
  margin: 40px 0 30px 0;
  font-size: 18px;
  text-align: center;
}
.size{
    font-size: 16px;
}
.el-form-item {
  margin-bottom: 16px;
}
.spanStyle {
  margin-left: 16px;
  margin-right: 4px;
  font-size: 14px;
  color: #606266;
}
.tabs {
  ::v-deep .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background-color: #e4e7ed;
    z-index: 1;
  }
  ::v-deep .el-tabs__header{
      line-height: 88px !important;
    }
  ::v-deep .el-tabs__active-bar{
      transform: translateY(-25px) !important;
  }
}
</style>
